<template>
  <span>{{innerSecond|filterSecond(true)}}</span>
</template>
<script>
import {filterSecond} from '@/filters'

export default {
  props: {
    second: {
      type: Number,
      required: true
    }
  },
  filters: {
    filterSecond
  },
  data() {
    return {
      innerSecond: this.second
    }
  },
  watch: {
    second(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.innerSecond = val
      this.innerSecondReduce()
    }
  },
  created() {
    this.innerSecondReduce()
  },
  methods: {
    innerSecondReduce() {
      if (this.innerSecond > 0) {
        this.innerSecond -= 1
        setTimeout(this.innerSecondReduce, 1000)
      }
    }
  }
}
</script>
